<template>
  <!-- 探测管理组件 -->
  <div v-show="showRepair">
    <div class="dialog_wrap" v-dialogDrag="true">
      <div class="dialog_content">
        <!-- 可按下拖动的位置 -->
        <div class="dialog_header">
          <div class="detect_box_title">测绘专题</div>
          <div class="close_btn" @click="closeQuery">×</div>
        </div>
        <!-- 其他区域 -->
        <div class="dialog_content_a">
          <!-- <el-button @click="resetChecked">reset</el-button> -->
          <el-tree
            ref="treeRef"
            :data="data"
            show-checkbox
            default-expand-all
            highlight-current
            :props="defaultProps"
            @check-change="handleCheck"
            v-loading="loading"
            node-key="id"
            :check-on-click-node="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Map } from 'ol'
import View from 'ol/View.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import { Stroke, Style, Circle, Fill } from 'ol/style'
import Text from 'ol/style/Text.js'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import Polygon from 'ol/geom/Polygon.js'
import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import { composeCssTransform } from 'ol/transform'
import { transform } from 'ol/proj'
import {
  onMounted,
  ref,
  toRaw,
  defineComponent,
  reactive,
  watch,
  nextTick,
} from 'vue'
import { VXETable } from 'vxe-table'
import Icon from 'ol/style/Icon.js'
import { require } from '@/utils/require'
import XEUtils from 'xe-utils'
import { getSg, getSgTree } from '@/api/index'
import $ from 'jquery'
import axios from 'axios'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 引入echarts
import * as echarts from 'echarts'
//测试用菠萝存储地图容器
import {
  userMap,
  mapStyle,
  switchList2,
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
} from '../../store/index'
function debounce(fn, wait) {
  let timeout, result
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timeout)
    const callNow = !timeout
    timeout = setTimeout(function () {
      timeout = null
    }, wait)
    if (callNow) result = fn.apply(context, args)
    return result
  }
}
function throttle(fn, delay) {
  let valid = true
  return function () {
    if (valid) {
      setTimeout(() => {
        fn.apply(this, arguments)
        valid = true
      }, delay)
      valid = false
    }
  }
}
let map = userMap() //接收
let list
let switchStyle
let storeStyle = mapStyle() //接受样式
let storeSwitch = switchList2()
// 控制修复菜单显隐
const showRepair = ref(false)
let storeKJCX = switchList5()
let storeRepair = switchList6()
let storeDetect = switchList7()
let storeCube = switchList8()
let storeDia = switchList9()
let changeCube
watch(storeCube, () => {
  changeCube = toRaw(storeCube.queryBtn)
  if (changeCube == true) {
    if (toRaw(storeDia.queryBtn) == true) {
      storeDia.queryBtn = false
      showRepair.value = true
      storeKJCX.queryBtn = false
      storeDetect.queryBtn = false
      storeRepair.queryBtn = false
    } else {
      showRepair.value = true
      storeKJCX.queryBtn = false
      storeDetect.queryBtn = false
      storeRepair.queryBtn = false
    }

    getServer()
  } else {
    closeQuery()
  }
})
const resetChecked = () => {
  treeRef.value.setCheckedNodes([], false)
}
const closeQuery = () => {
  // 关闭表单中所有所选
  resetChecked()
  showRepair.value = false
  storeCube.queryBtn = false
  const arr = list.getLayers().getArray()
  for (let i = 0; i < arr.length; i++) {
    if (
      arr[i].values_.title != 'GeoJSON' &&
      arr[i].className_ != 'myTdt' &&
      arr[i].className_ != 'HJLayer'
    ) {
      arr[i].getSource().clear()
    }
  }
}
// 探测图层
let SGLayer
let SGSource
//滚动loading
const loading = ref(false)
onMounted(() => {
  // 打开进度条
  loading.value = true
  /* 分割线 */
  getSgTree().then((res) => {
    console.log('测绘目录', res)
    const list = res.data
    const _arr = []
    for (let i = 0; i < list.length; i++) {
      const value = list[i].tag + '(' + list[i].lengths + 'm)'
      _arr.push(Object.assign({}, list[i], { eidPlus: value }))
    }
    let res2 = []
    const obj2 = XEUtils.groupBy(_arr, 'areaName')
    XEUtils.each(obj2, (childs, key) => {
      const obj4 = XEUtils.groupBy(childs, 'unitName')
      const a = obj4
      const arr = []
      for (let key2 in a) {
        // console.log('第三级', key2, a[key2])
        const obj5 = XEUtils.groupBy(a[key2], 'eidPlus')
        const b = obj5
        const arr2 = []
        for (let key3 in b) {
          arr2.push({
            id: key3,
            label: key3,
            Features: b[key3],
          })
        }
        arr.push({
          id: key2,
          label: key2,
          disabled: true,

          children: arr2,
        })
      }
      const obj3 = {
        id: key,
        label: key,
        disabled: true,
        children: arr,
      }
      res2.push(obj3)
    })
    data.value = res2
    loading.value = false
    // console.log('res2', res2)
  })
  /* 分割线 */
  // 修复部分
  list = toRaw(map.map)
  switchStyle = toRaw(storeStyle.map_style)
  // openList()
  // 修复部分结束
  // 注册探测图层
  // 单点图层(和线要素是分开的)--控制交互用
  SinglePointsource = new VectorSource({
    wrapX: false,
  })
  const SinglePointLayer = new VectorLayer({
    source: SinglePointsource,
    className: 'myTitle',
    zIndex: 9999,
    style: new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: [0, 0, 0, 1],
        }),
      }),
    }),
  })
  list.addLayer(SinglePointLayer)
  // 加载水管线要素信息
  SGSource = new VectorSource({
    wrapX: false,
  })
  SGLayer = new VectorLayer({
    source: SGSource,
    className: 'myTitle',
    // zIndex: 9999,
    title: 'SGLayer',
  })

  list.addLayer(SGLayer)
})
// 探测部分--禁用最高级
const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'label',
  disabled: 'disabled',
}
const data = ref([])

const handleCheck = (checkedNodes, isChecked) => {
  if (toRaw(checkedNodes).children == undefined && isChecked == true) {
    const serve = toRaw(checkedNodes).Features
    getSg(serve[0].tag).then((res) => {
       console.log('探测表单', res.data)
      const serveData = res.data
      for (let i = 0; i < serveData.length; i++) {
        list.getView().setResolution(0.52916772500211673)
        list.getView().setCenter([serveData[0].startX, serveData[0].startY])
        const arr1 = [serveData[i].startX, serveData[i].startY]
        const arr2 = [serveData[i].endX, serveData[i].endY]
        const arr3 = [serveData[i].startId, serveData[i].endId]
        const id1 = [serveData[i].startId]
        const id1Type = [serveData[i].startType]
        const id2 = [serveData[i].endId]
        const id2Type = [serveData[i].endType]
        const unitName = serveData[i].unitName
        const tag = serveData[i].tag + '(' + serveData[i].lengths + 'm)'
        // console.log('探测点', serveData[i])
        // 加载水管信息--未传递流向判断
        const SGline = new Feature({
          geometry: new LineString([arr1, arr2]),
          attributes: arr3,
          attributes2: serveData[i].startId + '-' + serveData[i].endId,
          PointAX: arr1,
          PointX: arr2,
          unitName: unitName,
          tag: tag,
          layerName: 'SGLayer',
        })
        // 按雨污进行管子颜色划分
        if (serveData[i].pipeType == '雨水管') {
          SGline.setStyle(
            new Style({
              stroke: new Stroke({
                color: `${stColor.value}`,
                width: width.value,
              }),
            })
          )
        } else if (serveData[i].pipeType == '污水管') {
          SGline.setStyle(
            new Style({
              stroke: new Stroke({
                color: [135, 99, 27, 1],
                width: width.value,
              }),
            })
          )
        } else {
          //其他管子
          SGline.setStyle(
            new Style({
              stroke: new Stroke({
                color: [0, 0, 0, 1],
                width: 3,
              }),
            })
          )
        }
        SGSource.addFeature(SGline)
        // 加载水管管点信息--起点
        SinglePointfeature = new Feature({
          geometry: new Point(arr1),
          attributes: id1,
          unitName: unitName,
          layerName: 'SGLayer',
          tag: tag,
        })
        SinglePointsource.addFeature(SinglePointfeature)
        // console.log('加载水管管点信息', arrPoint[i][3])
        SinglePointfeature.setStyle(function (resolution) {
          //监听分辨率跟随地图缩放
          if (id1Type == '雨水井') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/智慧井盖.png'),
                  src: require('/vue3Ol/images/雨水井.png'),
                }),
                // iconfont加载字体法
                // text: new Text({
                //   font: 'normal 7px "iconfont"',
                //   text: '\ue607',
                //   fill: new Fill({
                //     color: 'rgba(22, 92, 177,1)',
                //   }),
                //   textBaseline: 'bottom',
                // }),
              }),
            ]
          } else if (id1Type == '雨篦') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨篦.png'),
                  src: require('/vue3Ol/images/雨篦.png'),
                }),
              }),
            ]
          } else if (id1Type == '雨水进水口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水进水口.png'),
                  src: require('/vue3Ol/images/雨水进水口.png'),
                }),
              }),
            ]
          } else if (id1Type == '雨水排放口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/雨水排放口.png'),
                }),
              }),
            ]
          } else if (id1Type == '雨水预留口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/雨水预留口.png'),
                }),
              }),
            ]
          } else if (id1Type == '雨水阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水阀门.png'),
                  src: require('/vue3Ol/images/雨水阀门.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水井') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水井.png'),
                  src: require('/vue3Ol/images/污水井.png'),
                }),
              }),
            ]
          } else if (id1Type == '化粪池') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/化粪池.png'),
                  src: require('/vue3Ol/images/化粪池.png'),
                }),
              }),
            ]
          } else if (id1Type == '污篦') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污篦.png'),
                  src: require('/vue3Ol/images/污篦.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水进水口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水进水口.png'),
                  src: require('/vue3Ol/images/污水进水口.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水排放口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水排放口.png'),
                  src: require('/vue3Ol/images/污水排放口.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水预留口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/污水预留口.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水泵站') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水泵站.png'),
                  src: require('/vue3Ol/images/污水泵站.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水调蓄') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水调蓄.png'),
                  src: require('/vue3Ol/images/污水调蓄.png'),
                }),
              }),
            ]
          } else if (id1Type == '污水阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水阀门.png'),
                  src: require('/vue3Ol/images/污水阀门.png'),
                }),
              }),
            ]
          } else if (id1Type == '阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/阀门.png'),
                }),
              }),
            ]
          } else if (id1Type == '探测点') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/探测点.png'),
                  src: require('/vue3Ol/images/探测点.png'),
                }),
              }),
            ]
          } else if (id1Type == '雨水调蓄设施') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/探测点.png'),
                  src: require('/vue3Ol/images/雨水调蓄设施.png'),
                }),
              }),
            ]
          } else {
            //其他--外黑内蓝原点
            return [
              new Style({
                image: new Circle({
                  radius: list.getView().getZoom() / 3,
                  fill: new Fill({
                    color: [25, 159, 255, 1],
                  }),
                  offsetX: 0,
                  offsetY: 2, //调整相对位置
                  stroke: new Stroke({
                    color: [30, 30, 30, 1],
                  }),
                }),
              }),
            ]
          }
        })
        // 加载水管管点信息--终点
        const SinglePointfeatureElse = new Feature({
          geometry: new Point(arr2),
          attributes: id2,
          unitName: unitName,
          layerName: 'SGLayer',
          tag: tag,
        })
        SinglePointsource.addFeature(SinglePointfeatureElse)
        SinglePointfeatureElse.setStyle(function (resolution) {
          //监听分辨率跟随地图缩放
          if (id2Type == '雨水井') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水井.png'),
                  src: require('/vue3Ol/images/雨水井.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨篦') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨篦.png'),
                  src: require('/vue3Ol/images/雨篦.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨水进水口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水进水口.png'),
                  src: require('/vue3Ol/images/雨水进水口.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨水排放口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/雨水排放口.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨水预留口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/雨水预留口.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨水阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水阀门.png'),
                  src: require('/vue3Ol/images/雨水阀门.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水井') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水井.png'),
                  src: require('/vue3Ol/images/污水井.png'),
                }),
              }),
            ]
          } else if (id2Type == '污篦') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污篦.png'),
                  src: require('/vue3Ol/images/污篦.png'),
                }),
              }),
            ]
          } else if (id2Type == '化粪池') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/化粪池.png'),
                  src: require('/vue3Ol/images/化粪池.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水进水口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水进水口.png'),
                  src: require('/vue3Ol/images/污水进水口.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水排放口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水排放口.png'),
                  src: require('/vue3Ol/images/污水排放口.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水预留口') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/污水预留口.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水泵站') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水泵站.png'),
                  src: require('/vue3Ol/images/污水泵站.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水调蓄') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水调蓄.png'),
                  src: require('/vue3Ol/images/污水调蓄.png'),
                }),
              }),
            ]
          } else if (id2Type == '污水阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/污水阀门.png'),
                  src: require('/vue3Ol/images/污水阀门.png'),
                }),
              }),
            ]
          } else if (id2Type == '阀门') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/阀门.png'),
                }),
              }),
            ]
          } else if (id2Type == '探测点') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/雨水排放口.png'),
                  src: require('/vue3Ol/images/探测点.png'),
                }),
              }),
            ]
          } else if (id2Type == '雨水调蓄设施') {
            return [
              new Style({
                image: new Icon({
                  anchor: [0.5, 0.6], //锚点
                  opacity: 1,
                  scale: list.getView().getZoom() / 13,
                  // src: require('@/assets/images/图例/探测点.png'),
                  src: require('/vue3Ol/images/雨水调蓄设施.png'),
                }),
              }),
            ]
          } else {
            //其他井--外黑内蓝原点
            return [
              new Style({
                image: new Circle({
                  radius: list.getView().getZoom() / 3,
                  fill: new Fill({
                    color: [25, 159, 255, 1],
                  }),
                  stroke: new Stroke({
                    color: [30, 30, 30, 1],
                  }),
                  offsetX: 0,
                  offsetY: 2, //调整相对位置
                }),
              }),
            ]
          }
        })
      }
    })
  } else if (toRaw(checkedNodes).children == undefined && isChecked == false) {
    // console.log('取消图层', toRaw(checkedNodes).label)
    SGSource.forEachFeature((feature) => {
      if (
        feature.values_.unitName == toRaw(checkedNodes).label ||
        feature.values_.tag == toRaw(checkedNodes).label
      ) {
        SGSource.removeFeature(feature)
      }
    })
    SinglePointsource.forEachFeature((feature) => {
      if (
        feature.values_.unitName == toRaw(checkedNodes).label ||
        feature.values_.tag == toRaw(checkedNodes).label
      ) {
        SinglePointsource.removeFeature(feature)
      }
    })
  }
}
// 修复部分结束
const WatchScrolling = () => {
  list.on('moveend', (e) => {
    // console.log(e)
    testScale()
  })
}
const mapScale = ref(0) //比例尺大小
const testScale = () => {
  // 监听分辨率变化，通过dpi和像素关系（比例尺=dpi/0.0254*分辨率）输出比例尺
  list.getView().on('change:resolution', function () {
    //默认dpi
    const DEFAULT_DPI = 25.4 / 0.28
    //每米多少英寸
    const inchesPerMeter = 1000 / 25.4
    const currentScale =
      list.getView().getResolution() * inchesPerMeter * DEFAULT_DPI
    mapScale.value = Math.round(currentScale)
      .toLocaleString()
      .replaceAll(',', '')
  })
}
// watch(
//   mapScale,
//   debounce((v1, v2) => {
//     WatchScale()
//   }, 1000)
// )
const Level = ref(null) //管网等级
const leftTopX = ref(null)
const leftTopY = ref(null)
const rightBottomX = ref(null)
const rightBottomY = ref(null)
const WatchScale = async () => {
  // if (mapScale.value >= 200000) {
  //   Level.value = 1500
  //   const extent = list.getView().calculateExtent(list.getSize())
  //   leftTopX.value = extent[0]
  //   leftTopY.value = extent[3]
  //   rightBottomX.value = extent[1]
  //   rightBottomY.value = extent[2]

  // } else
  if (200000 > mapScale.value && mapScale.value >= 80000) {
    const extent = list.getView().calculateExtent(list.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 700
  } else if (mapScale.value < 80000 && mapScale.value >= 20000) {
    const extent = list.getView().calculateExtent(list.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 600
  } else if (20000 > mapScale.value && mapScale.value >= 10000) {
    const extent = list.getView().calculateExtent(list.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 450
  } else if (10000 > mapScale.value && mapScale.value >= 5500) {
    const extent = list.getView().calculateExtent(list.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 300
  } else if (5500 > mapScale.value) {
    const extent = list.getView().calculateExtent(list.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 0
  } else {
    console.log('错误', mapScale.value)
    // console.log(isNaN(mapScale.value))
  }
}
// watch(
//   leftTopX,
//   debounce(() => {
//     initCubeServer()
//   }, 1000)
// )
// 加载服务管网---
const stColor = ref('rgba(22, 92, 177,1)')
const width = ref(1.5)
const pointAttr = ref() //起点
const pointElseAttr = ref() //终点
let SinglePointsource
let SinglePointfeature
const initCubeServer = async () => {
  // console.log(map.getLayers().array_)
  list.getLayers().array_.map((item) => {
    console.log(item.className_ == 'myTitle')
    if (item.className_ == 'myTitle') {
      item.getSource().clear()
    }
  })

  getSg(Level.value).then((res) => {
    if (res.code == 200 && res.data.length >= 1) {
      const serveData = res.data
      console.log(res.data, 'res.data')
      // 探测表单
      const arr22 = res.data
      const _arr_parent = []
      const obj3 = XEUtils.groupBy(arr22, 'areaName')
      XEUtils.each(obj3, (childs, key) => {
        const obj2 = XEUtils.groupBy(childs, 'unitName')
        const a = obj2
        const arr8 = []
        const childrenLast = []
        XEUtils.each(obj2, (childs2, key2) => {
          const obj3 = XEUtils.groupBy(childs2, 'tag')
          for (let key in obj3) {
            childrenLast.push({
              label: key,
              Features: obj3[key],
            })
          }
        })
        for (let key in a) {
          arr8.push({
            label: key,
            Features: a[key],
            children: childrenLast,
          })
        }
        const obj1 = {
          label: key,
          children: arr8,
        }
        _arr_parent.push(obj1)
      })
      data.value = _arr_parent
    } else {
      console.log('暂无数据')
    }
  })
}
const getServer = () => {
  WatchScrolling()
}
</script>
<style lang="less" scoped>
.dialog_content {
  position: fixed;
  top: 50px;
  left: 8px;
  width: 370px;
  border: 1px solid #80eeff;
  background: #0a163cc9;

  .dialog_header {
    height: 50px;
    width: 100%;
  }
}
.dialog_wrap {
  .dialog_content_a {
    overflow: auto;
    height: 53vh;
    width: 369px;
  }
  :deep(.dialog_content_a) {
    scrollbar-color: #0a163cc9 #80eeff; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.dialog_content_a::-webkit-scrollbar) {
    width: 3px;
    height: 3px; // 纵向滚动条 必写
  }
  :deep(.dialog_content_a::-webkit-scrollbar-corner) {
    background: #0a163cc9;
  }
  :deep(.dialog_content_a::-webkit-scrollbar-thumb) {
    background-color: #80eeffce;
    // border: 1px dashed #888888;
    width: 2px;
    height: 80px;
  }
  :deep(.el-tree) {
    background: #0a163c5d;
    color: #fff;
    --el-tree-node-hover-bg-color: #0a163cc9;
    width: 500px;
    overflow-x: scroll;
  }
  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background: #0a163c5d;
  }
}
//修复菜单栏
.close_btn {
  // color: #269bff;
  color: #80eeff;
  position: absolute;
  font-size: 40px;
  right: 5px;
  top: -18px;
  cursor: pointer;
}
// 标题
.detect_box_title {
     text-align: center;
    background: #0e1d4cc9;
    height: 36px;
    line-height: 32px;
    border-bottom: 1px solid #80eeff;
    font-size: 17px;
    font-weight: 600;
    color: #80eeff;
}
/* 修复底部按钮组 */
.open_btns {
  position: absolute;
  right: 15px;
  bottom: 18px;
}
.open_btns button {
  margin: 0 5px 0 0;
  padding: 0;
  width: 75px;
  height: 22.8167px;
  border-radius: 10px;
  border: 1px solid #2ba3ff;
  color: #2ba3ff;
}
/* 折叠菜单 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  transform: translateX(-350px);
}
// 旋转按钮
.aa {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  right: -8px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.aa img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
}
.go {
  position: absolute;
  background: #ffffff;
  height: 70px;
  width: 8px;
  // right: 0px;
  z-index: 9999;
  top: 230px;
  cursor: pointer;
}
.go img {
  position: absolute;
  top: 30px;
  width: 100%;
  transition: all 0.5s;
  transform: rotate(180deg);
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
// 图片弹窗头
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}
// 管理弹窗头
.vxe_box {
  // :deep(.vxe-modal--wrapper .vxe-modal--header) {
  //   background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
  //     no-repeat !important;
  // }
  // :deep(.vxe-modal--header-right) {
  //   color: #fff;
  //   transform: translateY(5%);
  //   font-size: 18px;
  // }
  // 修改input
  :deep(.vxe-input) {
    display: inline-block;
    position: relative;
    width: 310px;
    margin: 15px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
  // 修改表头
  :deep(thead) {
    font-size: 13px;
    height: 10px;
  }
  :deep(tbody) {
    font-size: 13px;
  }
  :deep(.vxe-header--column) {
    line-height: 5px;
  }
  :deep(.body--wrapper) {
    scrollbar-color: #d8d8d8 #e9e9e9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.body--wrapper::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
    border: 1px solid #e9e9e9;
  }
  :deep(.body--wrapper::-webkit-scrollbar-thumb) {
    background-color: #d8d8d8;
    // border: 1px dashed #888888;
    width: 4px;
    height: 150px;
  }
}
.JC_title span {
  font-size: 20px;
}
// 检测弹窗选项
.first_line {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.first_line span {
  margin-right: 20px;
}
.second_line {
  font-size: 18px;
  margin-top: 7px;
  display: flex;
  justify-content: space-around;
  padding: 0 50px;
}
.third_line {
  font-size: 13.5px;
  font-weight: 500;
  width: 370px;
  // background: #e0dbdb;
  padding: 0 15px;
}
.third_line_a {
  display: inline-block;
  margin-right: 20px;
  transform: translateY(-5px);
}
.third_line button {
  position: absolute;
  right: 24px;
  top: 19.1%;
  margin: 0;
  padding: 0;
  width: 50px;
  border-radius: 10px;
  border: 1px solid #2ba3ff; //自定义边框
  color: #2ba3ff;
}
.el-span {
  display: inline-block;
  margin-right: 30px;
  transform: translateY(-5px);
}

// 修复
.XF_first_line {
  float: right;
  width: 950px; //修改进度条宽度
}
.XF_first_line_a {
  margin-left: 300px;
}
.XF_first_line span {
  margin-right: 20px;
}
.XF_second_line {
  display: inline-block;
  margin-right: 30px;
}

.vxe-button.type--button {
  float: right;
}
// 折叠按钮
.foldable_btn {
  float: right;
  margin-top: 0.5%;
}
/*
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}
</style>
